<template>
  <div>
    <div class="from">
      <div class="assignment">
        <h3 class="title">新增赋值</h3>
        <h3 class="records" @click="recordsclick">
          赋值记录 <i class="el-icon-d-arrow-right"></i>
        </h3>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name" class="tag">
              <el-input
                class="bodernone"
                v-model="assignment.nickname"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phonenumber" class="tag">
              <el-input
                class="bodernone"
                v-model="assignment.phonenumber"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇款银行" prop="bank">
              <el-input v-model="ruleForm.bank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款银行" prop="payeeBank">
              <el-input v-model="ruleForm.payeeBank"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行凭证号" prop="serialNo">
              <el-input v-model="ruleForm.serialNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇款时间" prop="createTime">
              <el-date-picker
                format="yyyy-MM-dd"
                v-model="ruleForm.createTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇款账号" prop="bankNo">
              <el-input v-model="ruleForm.bankNo"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="收款金额" prop="amount">
              <el-input v-model="ruleForm.amount"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="问金" prop="voucher">
              <el-input v-model="ruleForm.voucher"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
     
      </el-form>
      <SubBtn>
        <template slot="btn">
          <el-button round @click="resetForm('ruleForm')">重置</el-button>
          <el-button round class="addBtn"  @click="submitForm('ruleForm')">立即创建</el-button>
        </template>
      </SubBtn>
    </div>
    <Comdrawer
      size="50%"
      title="赋值记录"
      :drawer="tableshow"
      @eventColse="tableColse"
    >
      <ComTable
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :config="config"
        :pagination="{
          total: pageing.total,
          pageNum: pageing.pageNum,
          pageSize: pageing.pageSize,
        }"
        :list="assignmenttable"
        :modes="consumptionModes"
      >
      </ComTable>
    </Comdrawer>
  </div>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import { addUserassignment,getUserassignment } from "@/wss/newApi_3-24/askAround/index";

export default {
  name: "User",
  props: ["assignment"],
  components: { ComTable, Comdrawer, SubBtn },
  data() {
    return {
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      assignmenttable:[],//复制记录集合
      formLabelWidth: "120px",
      tableshow: false, //表格的显示
      ruleForm: {
        serialNo: "", //银行凭证
        bank: "", //收款银行
        bankNo: "", //汇款账号
        payeeBank: "", //汇款银行
        voucher: "", //问金
        amount: "", //汇款金额
        createTime: "", //汇款时间
      },
      rules: {
        
        serialNo: [
          { required: true, message: "请输入银行凭证", trigger: "blur" },
        ],
        payeeBank: [
          { required: true, message: "请输入收款银行", trigger: "blur" },
        ],
        bank: [{ required: true, message: "请输入汇款银行", trigger: "blur" }],

        createTime: [
          { required: true, message: "请选择回款时间", trigger: "blur" },
        ],
        bankNo: [
          { required: true, message: "请输入汇款账号", trigger: "blur" },
        ],
        amount: [
          { required: true, message: "请输入汇款金额", trigger: "blur" },
        ],
        voucher: [{ required: true, message: "请输入问金", trigger: "blur" }],
        // date1: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change",
        //   },
        // ],
        // date2: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择时间",
        //     trigger: "change",
        //   },
        // ],
      },
      //圈主消费详情表格
      consumptionModes: [
        {
          showOverflowTooltip: true,
          label: "日期",
          mode: "createTime",
        },
        {
          label: "银行凭证号",
          mode: "serialNo",
          showOverflowTooltip: true,
        },
        {
          label: "汇款银行",
          mode: "bank",
          showOverflowTooltip: true,
        },
        {
          label: "收款银行",
          mode: "bank",
          showOverflowTooltip: true,
        },
        {
          label: "汇款账号",
          mode: "bankNo",
          showOverflowTooltip: true,
        },
        {
          label: "收款银行",
          mode: "payeeBank",
          showOverflowTooltip: true,
        },
        {
          label: "金额（元）",
          mode: "amount",
          showOverflowTooltip: true,
        },
        {
          label: "问金",
          mode: "voucher",
          showOverflowTooltip: true,
        },
      ],

      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
    };
  },
  created() {
    //查询赋值记录
    // this.getUserassignmentfn();
  },
  computed: {
    assignmentlist() {
      const pageing = this.pageing;
      pageing.total = this.assignmenttable.length;
      let small = undefined;
      if (pageing.pageNum < 1) {
        small = (pageing.pageNum - 1) * pageing.pageSize;
      } else {
        small = 1;
      }
      let max = pageing.pageNum * pageing.pageSize;
      this.pageing = pageing;
      return this.assignmenttable.slice(small, max);
    },
  },
  methods: {
     //查詢赋值记录
    async getUserassignmentfn() {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
        userId: this.assignment.userId,
      };
      let { code, rows,total } = await getUserassignment(newdata);
      if (code == 200) {
        this.assignmenttable = rows;
        this.pageing.total=total
      }
    },
    //用户赋值新增
    async addUserassignmentfn() {
      let newform = {
        userId: this.assignment.userId,
        serialNo: this.ruleForm.serialNo,
        bank: this.ruleForm.bank,
        bankNo: this.ruleForm.bankNo,
        amount: this.ruleForm.amount,
        voucher: this.ruleForm.voucher,
        payeeBank: this.ruleForm.payeeBank,
        createTime: this.ruleForm.createTime,
      };

      let { code } = await addUserassignment(newform);
      if (code == 200) {
        this.$message({
          message: "赋值成功",
          type: "success",
        });
        this.ruleForm={}
        this.assignment.nickname=""
        this.assignment.phonenumber=""
        this.getUserassignmentfn();

      }
    },
    //弹窗表格函数
    recordsclick() {
      this.tableshow = true;
      this.getUserassignmentfn();
    },
    //关闭弹窗
    tableColse() {
      this.tableshow = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addUserassignmentfn();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.assignment.nickname = "";
      this.assignment.phonenumber = "";
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getUserassignmentfn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getUserassignmentfn();
    },
  },
};
</script>

<style scoped>
>>> .from .bodernone .el-input__inner {
  border: 0;
}
.el-col-12 {
  height: 80px;
  padding: 0px 15px ;
}

.assignment {
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
.tag {
  margin-left: 10px;
  /* margin-right: 0px; */
}
.title {
  font-size: 16px;
  font-weight: 700;
  color: #2e405e;
  margin: 20px 0;
}
.records {
  font-size: 14px;
  margin: 20px 0;
  color: #313c4e;
}
>>>.el-drawer__body{
  padding: 10px 20px;
}

>>>.label-box-content h1{
  border: none;
}
.subBtn{
  padding-right: 60px;
}
</style>